import React from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, UnlockOutlined, UnlockFilled } from '@ant-design/icons';
import request from '@/utils/request'

export default function Reg(props) {
    //注册
    const onFinish = async (values) => {
        const { data } = await request.post('/user/register', { ...values });

        if (!data.success) {
            return;
        }
        message.success('注册成功')

    };
    //登录
    const goToLogin = (values) => {
        props.history.push('/login', {
            ...values
        })
    }
    return (
        <div className="form_box">
            <Form
                name="basic"
                onFinish={onFinish}
                initialValues={{ account: '', password: '' }}
                autoComplete="off"
            >
                <h3 className="login_title">学生注册</h3>
                <Form.Item
                    name="account"
                    validateTrigger="onSubmit"
                    rules={[
                        { required: true, message: '输入用户' },
                        ({ getFieldValue }) => ({
                            async validator() {
                                if (getFieldValue('password') !== getFieldValue('confirm')) return;
                                const { data } = await request.post('/user/register', { account: getFieldValue('account'), password: getFieldValue('password') })
                                if (!data.success) {
                                    return Promise.reject(new Error('用户已存在'));
                                } else {
                                    goToLogin({ account: getFieldValue('account'), password: getFieldValue('password') })
                                }
                            },
                        })

                    ]}
                    className="inp"
                >
                    <Input
                        prefix={<UserOutlined style={{ fontSize: 20 }} />}
                        style={{
                            height: 50,
                            background: 'rgba(0, 0, 0, .1)',
                        }}
                        placeholder="学号/职工号"
                    />
                </Form.Item>


                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                    className="inp"
                >
                    <Input.Password
                        prefix={<UnlockOutlined style={{ fontSize: 20 }} />}
                        placeholder="密码"
                        style={{
                            height: 50,
                            background: 'rgba(0, 0, 0, .1)',
                        }}
                    />
                </Form.Item>
                <Form.Item
                    name="confirm"
                    dependencies={['password']}
                    // validateTrigger="onSubmit"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: '两次密码输入不同',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次密码输入不同'));
                            },
                        }),
                    ]}
                    className="inp"
                >
                    <Input
                        prefix={<UnlockFilled style={{ fontSize: 20 }} />}
                        style={{
                            height: 50,
                            background: 'rgba(0, 0, 0, .1)',
                        }}
                        type="password"
                        placeholder="确认密码"
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        注册
                    </Button>
                </Form.Item>
                <div className="goToReg" onClick={() => { goToLogin({}) }}>
                    返回登录
                </div>
            </Form>
        </div>
    )
}
